<template>
	<view class="container">
		<!-- 搜索部件 -->
		<view class="search-section">
			<view class="search-box" @click="navigateToSearch">
				<text class="placeholder">搜索文章</text>
			</view>
		</view>

		<!-- 内容容器，为固定搜索框留出空间 -->
		<view class="content-wrapper">
			<!-- 顶部标签栏 -->
			<scroll-view scroll-x="true" class="tab-scroll">
			<view class="tab-bar">
				<view class="tab-item" :class="{ active: activeTab === 'follow' }" @click="switchTab('follow')">
					<text>关注</text>
				</view>
				<view class="tab-item" :class="{ active: activeTab === 'recommend' }" @click="switchTab('recommend')">
					<text>推荐</text>
				</view>
				<view class="tab-item" :class="{ active: activeTab === 'info' }" @click="switchTab('info')">
					<text>资讯</text>
				</view>
				<view class="tab-item" :class="{ active: activeTab === 'hot' }" @click="switchTab('hot')">
					<text>热榜</text>
				</view>
				<view class="tab-item" :class="{ active: activeTab === 'student' }" @click="switchTab('student')">
					<text>大学生专区</text>
				</view>
				<view class="tab-item" :class="{ active: activeTab === 'learn' }" @click="switchTab('learn')">
					<text>学习</text>
				</view>
			</view>
		</scroll-view>

		<!-- 内容列表 - 使用scroll-view实现上拉加载 -->
		<scroll-view 
			scroll-y="true" 
			class="article-scroll" 
			@scrolltolower="onLoadMore" 
			lower-threshold="50">
			<view class="article-list">
				<view class="article-item" v-for="(item, index) in dataList" :key="index" @click="navigateToDetail(item)">
					<!-- 作者信息 -->
					<view class="user-info">
						<image :src="item.avatarUrl" mode="aspectFit" class="user-image" />
						<view class="user-name">{{ item.authorName }}</view>
					</view>

					<!-- 文章主题 -->
					<view class="article-main">
						<view class="article-content">
							<view class="article-title">{{ item.title }}</view>
							<view class="article-subtitle">{{ item.subtitle }}</view>
						</view>
						<image v-if="item.coverUrl" :src="item.coverUrl" mode="aspectFill" class="article-url" />
					</view>

					<view class="article-footer">
						<!-- 文章阅读量 -->
						<view class="article-read">
							<image src="https://zxs-lyblog.oss-cn-hangzhou.aliyuncs.com/icon/read.png" 
								mode="aspectFill" />
							<text>{{ item.readCount }}</text>
						</view>

						<!-- 文章点赞量 -->
						<view class="article-read">
							<image v-if="!item.likeFlg" 
								src="https://zxs-lyblog.oss-cn-hangzhou.aliyuncs.com/icon/no-like.png" 
								mode="aspectFill" />
							<image v-else src="https://zxs-lyblog.oss-cn-hangzhou.aliyuncs.com/icon/liked.png" 
								mode="aspectFill" />
							<text>{{ item.likeCount }}</text>
						</view>

						<!-- 文章收藏量 -->
						<view class="article-read">
							<image v-if="!item.favoriteFlg" 
								src="https://zxs-lyblog.oss-cn-hangzhou.aliyuncs.com/icon/no-collect.png" 
								mode="aspectFill" />
							<image v-else src="https://zxs-lyblog.oss-cn-hangzhou.aliyuncs.com/icon/collected.png" 
								mode="aspectFill" />
							<text>{{ item.favoriteCount }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 加载提示 -->
			<view class="loading-more" v-if="loading">
				<text>加载中...</text>
			</view>
			
			<!-- 没有更多数据提示 -->
			<view class="no-more" v-if="!loading && hasMoreData === false">
				<text>没有更多数据了</text>
			</view>
		</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 'recommend', // 默认选中推荐标签
				dataList: [],
				totalCount: 0, // 总数据量
				pageIndex: 1,
				pageSize: 5, // 每页显示的数据量，设置为5以便测试上拉加载
				loading: false, // 加载状态
				hasMoreData: true, // 是否还有更多数据
			};
		},
		onLoad() {
			this.getArticleList();
		},
		methods: {
			/**
			 * 切换标签
			 */
			switchTab(tabName) {
				this.activeTab = tabName;
				this.pageIndex = 1;
				this.dataList = [];
				this.hasMoreData = true; // 切换标签时重置是否有更多数据的状态
				this.getArticleList();
			},

			/**
			 * 获取文章列表
			 */
			async getArticleList(loadMore = false) {
				// 如果是加载更多且已经在加载中，则直接返回
				if (loadMore && this.loading) {
					return;
				}
				
				// 设置加载状态
				this.loading = true;
				
				try {
					// const data = await this.$api.article.getArticlesList({
					// 	tab: this.activeTab, // 标签类型
					// 	pageNo: this.pageIndex, // 页码
					// 	pageSize: this.pageSize // 每页条数
					// });
					// if (data && data.code === 0) {
					// 	// 如果是加载更多，则追加数据，否则替换数据
					// 	if (loadMore) {
					// 		this.dataList = [...this.dataList, ...data.page.list];
					// 	} else {
					// 		this.dataList = data.page.list;
					// 	}
					// 	this.totalCount = data.page.totalCount;
						
					// 	// 判断是否还有更多数据
					// 	this.hasMoreData = this.dataList.length < this.totalCount;
					// } else {
					// 	if (!loadMore) {
					// 		this.dataList = [];
					// 		this.totalCount = 0;
					// 	}
					// 	this.hasMoreData = false;
					// }
				} catch (err) {
					console.error('获取文章列表失败:', err);
					// 可以添加错误处理，如显示提示信息
				} finally {
					// 无论成功失败，都要设置加载状态为false
					this.loading = false;
				}
			},
			
			/**
			 * 上拉加载更多
			 */
			async onLoadMore() {
				// 如果没有更多数据或已经在加载中，则不执行加载操作
				if (!this.hasMoreData || this.loading) {
					return;
				}
				
				// 增加页码
				this.pageIndex++;
				
				// 稍微停顿一下，然后加载更多数据
				setTimeout(() => {
					this.getArticleList(true);
				}, 300);
			},

			/**
			 * 跳转到文章详情页
			 */
			navigateToDetail(item) {
				uni.navigateTo({
					url: `/pages/article/article?articleid=${item.articleId}`
				});
			},

			/**
			 * 跳转到搜索页
			 */
			navigateToSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	@import './index.scss';
</style>